<template>
  <el-card class="overview" shadow="never">
    <div class="overview-avatar is-center">
      <el-avatar :size="110" fit="cover" :src="realAvatar">
        <img :src="defaultAvatar" alt="默认头像" />
      </el-avatar>
      <div class="overview-avatar-text">
        <p class="overview-avatar-text_author">BLOG</p>
        <p class="overview-avatar-text_slogan">Colorful Blog</p>
      </div>
    </div>
    <div class="overview-data is-center">
      <div
        v-for="item of overviewData"
        :key="item.code"
        class="overview-data-item"
      >
        <router-link :to="item.path">
          <p>{{ item.name }}</p>
          <p>{{ item.total }}</p>
        </router-link>
      </div>
    </div>
    <div class="overview-collect is-center">
      <i class="el-icon-third-shuqian is-vertical iconfont-collect" />
      <span class="overview-collect-text">加入书签</span>
    </div>
    <div class="overview-social is-center">
      <a :href="giteePath" target="_blank" class="overview-social-link">
        <i class="el-icon-third-qq-circle iconfont-qq" />
      </a>
      <a :href="giteePath" target="_blank" class="overview-social-link">
        <i class="el-icon-third-wechat-circle iconfont-wechat" />
      </a>
      <a :href="giteePath" target="_blank" class="overview-social-link">
        <i class="el-icon-third-zhihu-circle iconfont-zhihu" />
      </a>
      <a :href="giteePath" target="_blank" class="overview-social-link">
        <i class="el-icon-third-gitee-circle iconfont-gitee" />
      </a>
      <a :href="githubPath" target="_blank" class="overview-social-link">
        <i class="el-icon-third-github-circle iconfont-github" />
      </a>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Overview",
  data() {
    return {
      realAvatar:
        "/avatar.png",
      defaultAvatar:
        "/avatar.png",
      overviewData: [
        { path: "#", code: "article", name: "文章", total: 100 },
        { path: "#", code: "tag", name: "标签", total: 50 },
        { path: "#", code: "category", name: "分类", total: 15 },
      ],
      giteePath: this.$consts.giteePath,
      githubPath: this.$consts.githubPath,
    };
  },
};
</script>

<style lang="stylus" scoped>
.el-avatar:hover {
  transition: all 1s;
  transform: rotate(360deg);
}

.overview-avatar-text {
  padding-top: 0.1rem;
}

.overview-avatar-text_slogan {
  color: var(--fontLevel2, red);
  font-size: 0.14rem;
  font-style: italic;
}

.overview-data {
  display: flex;
  justify-content: space-around;
  padding: 0.2rem 0;
}

.overview-collect {
  color: white;
  font-size: 0.14rem;
  padding: 0.02rem 0;
  border-radius: 0.03rem;
  background-color: var(--colorLevel2, #49b1f5);
  transition: all 0.3s;
}

.overview-collect:hover {
  cursor: pointer;
  background-color: var(--colorLevel1, #49b1f5);
}

.overview-collect-text {
  padding-left: 0.1rem;
}

.overview-social {
  margin-top: 0.15rem;
}

.overview-social-link {
  padding: 0 0.1rem;
}
</style>


